<template>
  <el-dialog
    title="处方选择"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="60%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <div class="selected-content">
      <template v-if='selectionList && selectionList.length'>
        <div v-for="item in selectionList" :key="item.erpPrescId" class="item">
          <span>{{ item.erpPrescNo }}</span>
          <span class="del-item-btn" @click="handleDelSelection(item)"><i class="el-icon-close"></i></span>
        </div>
      </template>
    </div>

    <el-form :model="queryParams" :inline="true" ref="queryForm">
      <el-form-item prop="erpPrescNo">
        <el-input
          v-model="queryParams.erpPrescNo"
          placeholder="请输入关键字"
          clearable
          size="small"
          @keyup.enter.native="searchList"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <TableSelect
      ref="table"
      :data="prescList"
      :selectionList.sync="selectionList"
      :selectableCallBack="selectableCallBack"
      height="260px"
      rowKey="erpPrescId"
      v-loading="tableLoading"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column
        label="处方编号"
        align="center"
        prop="erpPrescNo"
      ></el-table-column>
      <el-table-column
        label="配方编号"
        align="center"
        prop="erpFormulaNo"
      >
        <template slot-scope="scope">
          <span>{{scope.row.erpFormulaDto && scope.row.erpFormulaDto.erpFormulaNo}}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="生产产品"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{scope.row.erpFormulaDto && scope.row.erpFormulaDto.productItem && scope.row.erpFormulaDto.productItem.erpItemName}}</span>
        </template>
      </el-table-column>
    </TableSelect>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getList"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="beSureSelect()">保 存</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { erpPrescList } from "@/api/workOrder/confirmClose";
import TableSelect from "@/components/TableSelect";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // 不可选回调，返回true或false，传参为user
    selectableCallBack: {
      type: Function,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },

    // 默认展示已经选中处方
    defaultValues: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      queryParams: {
        erpPrescNo:null
      },
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      tableLoading: false,
      prescList:[],
      selectionList: []
    };
  },

  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
  },

  methods: {
    handleClose() {
      this.queryParams = {
        erpPrescNo: null,
      };
      this.selectionList = [];
      this.tableLoading = false;
      this.pager.total = 0;
      this.pager.pageNum = 1;
    },

    handleOpen() {
      this.selectionList = this.defaultValues?.length ? [...this.defaultValues] : []
      this.getList();
    },

    //获取处方列表
    getList() {
      this.tableLoading = true;
      const { pageNum, pageSize } = this.pager;
      const param = {
        query:this.queryParams,
        pageNum,
        pageSize,
      };
      erpPrescList(param)
      .then(response => {
        if (response.code == 200) {
          this.prescList = response.rows || [];
          this.pager.total = response.total;
        } else {
          this.prescList = []
          this.total = 0
        }
        this.tableLoading = false;
      }).catch(() => {
        this.prescList = []
        this.pager.total = 0
        this.tableLoading = false;
      });
    },

    //重置
    resetQuery(){
      this.pager.pageNum = 1;
      this.resetForm("queryForm");
      this.getList();
    },

    handleDelSelection(item) {
      if (!item) {
        return
      }
      if (this.$refs.table) {
        this.$refs.table.handleDelSelection(item);
      }
    },
    beSureSelect() {
      const selection = this.selectionList;
      if (!this.multiple) {
        if (selection.length > 1) {
          this.$message({
            message: "最多选择一条数据!",
            type: "warning",
          });
          return;
        }
      }
      this.$emit("closeDialog", selection || []);
      this.dialogVisible = false;
    },
  },
  components:{
    TableSelect
  }
};
</script>
<style lang="scss" scoped>
.selected-content {
  width: 100%;
  height: 60px;
  padding: 10px;
  border: 1px solid #dfe6ec;
  margin-bottom: 20px;
  overflow-y: auto;
  .item {
    height: 28px;
    line-height: 28px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    background: rgb(234, 248, 254);
    color: #409eff;
    .del-item-btn {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
::v-deep {
  .el-dialog .el-dialog__body {
    max-height: calc(100vh - 10rem);
    padding-top: 10px;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
}
</style>
